/*
 * @Description: 档案类型面板
 * @Author: Rfan
 * @Date: 2022-01-20 15:45:14
 * @LastEditTime: 2022-09-17 20:13:42
 */

import { useEffect, useMemo, useState } from 'react';
import { Button, Checkbox, Divider, Form, Input, Radio, Select, Space, Typography } from 'antd';
import classNames from 'classnames/bind';
import arcTypeStore from '@/store/arcTypeStore';
import { useArcTypeContext } from '../contexts/ArcTypeContext';
import RepoMgmtDialog from './dialogs/RepoMgmt';
import styles from '../styles/arcTypePane.module.scss';

const cx = classNames.bind(styles);

const { Option } = Select;

// 层级列表
const levelList = [
  // { id: 0, text: '电子文件' },
  { id: 3, text: '项目' },
  { id: 2, text: '案卷' },
  { id: 1, text: '文件' }
];

const ArcTypePane = (props: any) => {
  const { data } = props;
  const { repoInfo, deleteAtType, editAtType } = useArcTypeContext();
  const { atTypeList } = arcTypeStore;
  const [form] = Form.useForm();

  // 库管理弹窗展示状态
  const [repoManageVisible, setRepoManageVisible] = useState(false);
  // 保存按钮可用状态
  const [saveBtnState, setSaveBtnState] = useState(false);

  useEffect(() => {
    form.setFieldsValue({ ...data, ...repoInfo });
  }, [data]);

  /**
   * @description: 删除档案类型
   */
  const delItem = () => {
    deleteAtType(data.id);
  };

  /**
   * @description: 打开库管理弹窗
   */
  const showRepoMgmtDialog = () => {
    setRepoManageVisible(true);
  };

  /**
   * @description: 提交表单
   */
  const submitFunc = () => {
    form.submit();
  };

  /**
   * @description: 表单验证通过方法
   * @param {any} values 表单数据
   */
  const onFinish = (values: any) => {
    values.id = data.id;
    delete values.atType;
    delete values.atCode;
    delete values.atLevel;
    console.log('form finish', values);
    editAtType(values).then(() => {
      setSaveBtnState(false);
    });
  };

  /**
   * @description:表单字段更新
   * @param {*} changedValues
   * @param {*} allValues
   */
  const changeFormData = () => {
    setSaveBtnState(true);
  };

  return (
    <div className={cx('arc-type-pane')}>
      <div className={cx('arc-type-header')}>
        <div className={cx('title')}>档案类型信息</div>
        <div className={cx('operate')}>
          <Space>
            <Button
              type="primary"
              onClick={() => {
                showRepoMgmtDialog();
              }}
            >
              库管理
            </Button>
            <Button danger onClick={delItem}>
              删除档案类型
            </Button>
            <Button disabled={!saveBtnState} onClick={submitFunc}>
              保存
            </Button>
          </Space>
        </div>
      </div>
      <div className={cx('container')}>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 10 }}
          form={form}
          onValuesChange={changeFormData}
          onFinish={onFinish}
        >
          <Form.Item
            name="atName"
            label="名称"
            extra="档案类型的标识，如，科技档案，基建档案等"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="atCode" label="档案类型代码" rules={[{ required: true }]}>
            <Input disabled />
          </Form.Item>
          {/* <Form.Item name="atType" label="库类型" rules={[{ required: true }]}>
            <Select disabled>
              {atTypeList.map((item) => (
                <Option key={item.value} value={item.value}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item> */}
          <Form.Item
            label="选择模板"
            extra={
              <span>
                档案类型模板内包含档案层级和<Typography.Link>档案元数据</Typography.Link>
                （规范），可根据实际进行调整
              </span>
            }
          >
            <Form.Item noStyle>
              <Select value={1} disabled style={{ marginBottom: '8px' }}>
                <Option value={1}>通用模板</Option>
              </Select>
            </Form.Item>
            <Form.Item name="atLevel" noStyle>
              <Radio.Group disabled>
                {levelList.map((item) => (
                  <Radio value={item.id} key={item.id}>
                    {item.text}
                  </Radio>
                ))}
              </Radio.Group>
            </Form.Item>
            <Divider type="vertical" />
            <Checkbox disabled>
              装
              <Form.Item name="containerUnit" noStyle>
                <Input size="small" style={{ width: '50px' }} disabled />
              </Form.Item>
            </Checkbox>
          </Form.Item>
          <Form.Item
            label="已选分类方案"
            extra={
              <span>
                创建时选择档案分类模板，可在<Typography.Link>档案分类方案</Typography.Link>
                内根据实际进行调整
              </span>
            }
          >
            <Select disabled value={1}>
              <Option value={1}>默认</Option>
            </Select>
          </Form.Item>
          {/* <Form.Item name="allowDelete" normalize={(val) => (val ? 1 : 0)} label="删除状态">
            <Radio.Group disabled>
              <Space direction="vertical" size={0}>
                <Radio value={1} style={{ lineHeight: '32px' }}>
                  禁止删除
                </Radio>
                <Radio value={0} style={{ lineHeight: '32px' }}>
                  允许删除
                </Radio>
              </Space>
            </Radio.Group>
          </Form.Item> */}
          <Divider />
          {/* <Form.Item label="编号控制">
            <Radio.Group disabled>
              <Radio value={1}>业务部门可自主编号</Radio>
              <Radio value={2}>档案室集中编号</Radio>
            </Radio.Group>
          </Form.Item> */}
          <Form.Item label="门类划分">
            <Radio.Group disabled value={1}>
              <Radio value={1}>文件档案</Radio>
              <Radio value={2}>照片档案</Radio>
              <Radio value={3}>音视频档案</Radio>
              <Radio value={4}>其他档案</Radio>
              <Radio value={5}>资料</Radio>
            </Radio.Group>
          </Form.Item>
          <Divider />
          <Form.Item label="其它">
            <Space direction="vertical">
              <Form.Item
                name="allowSearchUtilize"
                valuePropName="checked"
                normalize={(val) => (val ? 1 : 0)}
                noStyle
              >
                <Checkbox style={{ lineHeight: '32px' }} disabled>
                  提供检索和利用
                </Checkbox>
              </Form.Item>
              <Form.Item
                name="allowSearchUtilizeOtherUnit"
                valuePropName="checked"
                normalize={(val) => (val ? 1 : 0)}
                noStyle
              >
                <Checkbox disabled>对外单位提供检索和利用</Checkbox>
              </Form.Item>

              {/* <Checkbox disabled>属于脱机载体，用于电子档案的脱机备份</Checkbox> */}
              {/* <Checkbox disabled>参与年报统计</Checkbox> */}
              {/* <Checkbox disabled>归档前执行四性监测</Checkbox> */}
            </Space>
          </Form.Item>
          <Form.Item name="remark" label="备注">
            <Input.TextArea
              placeholder="备注信息描述，最多可填写2000字"
              maxLength={2000}
              showCount
            />
          </Form.Item>
        </Form>
      </div>
      {useMemo(
        () => (
          <RepoMgmtDialog
            visible={repoManageVisible}
            data={data}
            onClose={() => {
              setRepoManageVisible(false);
            }}
          />
        ),
        [repoManageVisible]
      )}
    </div>
  );
};

export default ArcTypePane;
